<template>
  <div class="main-list-item">
    <div v-for='(item,index) in lists' :key='item.id'>
      <div class="list-item-top">
        <div class="list-item-info">
          <div class="info-top">
            <span class="info-class">{{item.class}}</span>
            <span class="info-class">{{index}}</span>
            <span class="info-time">{{item.time}}</span>
          </div>
          <span class="info-title">{{item.title}}</span>
        </div>
        <div class="list-item-img">
          <img :src="item.img">
        </div>
      </div>
      <div class="list-item-content">{{item.content}}</div>
    </div>
    <div>
      <router-link to="/">首页</router-link>
    </div>
  </div>
</template>
<script>
export default {
  //   props: {
  //     item: {
  //       type: Object,
  //       default () {
  //         return {}
  //       }
  //     }
  //   },
  data () {
    return {
      lists: [
        {
          id: 1,
          title: 'vue-ssr-客服端测试1',
          class: 'vue-ssr',
          img: 'https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1520835680&di=edc177c7202af63eff4f3e18a37178e1&src=http://img4.duitang.com/uploads/item/201606/24/20160624173615_Ernkc.jpeg',
          time: '2018-3-121',
          content: 'Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将静态标记混合为客户端上完全交互的应用程序。'
        },
        {
          id: 2,
          title: 'vue-ssr-客服端测试2',
          class: 'vue-ssr',
          img: 'https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1520835680&di=edc177c7202af63eff4f3e18a37178e1&src=http://img4.duitang.com/uploads/item/201606/24/20160624173615_Ernkc.jpeg',
          time: '2018-3-12',
          content: 'Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将静态标记混合为客户端上完全交互的应用程序。'
        },
        {
          id: 3,
          title: 'vue-ssr-客服端测试3',
          class: 'vue-ssr',
          img: 'https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1520835680&di=edc177c7202af63eff4f3e18a37178e1&src=http://img4.duitang.com/uploads/item/201606/24/20160624173615_Ernkc.jpeg',
          time: '2018-3-12',
          content: 'Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将静态标记混合为客户端上完全交互的应用程序。'
        }
      ]
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.main-list-item {
  font-size: 14px;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 1.5rem 2rem;
  border-bottom: 1px solid rgba(178, 186, 194, 0.15);
  background: #fff;
  box-sizing: border-box;
  .list-item-top {
    display: flex;
    align-items: center;
    .list-item-info {
      display: flex;
      flex-direction: column;
      flex: 1;
      .info-title {
        font-size: 1.6rem;
        font-weight: 600;
        line-height: 1.2;
        color: #2e3135;
      }
      .info-top {
        margin-bottom: 0.5rem;
        display: flex;
        align-items: center;
        .info-class {
          font-weight: 500;
          color: #b71ed7;
        }
        .info-time {
          color: #909090;
          margin-left: 0.5rem;
        }
      }
    }
    .list-item-img {
      width: 5rem;
      height: 5rem;
      border-radius: 2px;
      overflow: hidden;
      & > img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .list-item-content {
    margin-top: 1rem;
    word-break: break-word;
    line-height: 1.75;
    font-weight: 400;
    font-size: 15px;
  }
}
a {
  color: #aeec03;
}
</style>
